﻿/* Info
    .style  class styles
    #style  id styles
*/

/* -------------- general ------------*/
html {
    width: 100%;
    height: 100%;
}

body {
    font-family: Verdana, Arial, sans-serif;
    font-size: 75%;
    line-height: normal;
    height: 100%;
    width: 100%;
    min-width: 1000px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}

/* header row */
#header {
    height: 25px;
    font-size: 0.8em;
    font-variant: small-caps;
    font-weight: bold;
    text-align: left;
    padding: 3px 0 0 10px;
}

/* hide / collapse input */
#headerBar {
    font-size: 0.9em;
    height: 25px;
    padding: 2px 2px 2px 10px;
    vertical-align: middle;
    overflow: hidden;
}

/* task info */
#headerBarTaskInfo {
    vertical-align: top;
    display: inline-block;
    padding: 3px 0 0 0;
}

@media (max-width: 1249px) {
    #headerBarTaskInfo { font-size: 0.8em; }
}

@media (min-width: 1250px) {
    #headerBarTaskInfo { font-size: 0.9em; }
}

    /* tab selection */
#headerBarTabSelection {
    margin-top: 2px;
    vertical-align: top;
}

/* -------------- side bar ------------*/
/* Side bar is also dynamically adjusted in 
*  PageController.showHideInputAndTabs 
*/
#sideBar {
    float: left;
    min-width: 300px;
    z-index: 0;
}

@media (max-width: 1249px) {
    #sideBar { width: 30%; }
}

@media (min-width: 1250px) and (max-width: 1699px) {
    #sideBar { width: 25%; }
}

@media (min-width: 1700px) {
    #sideBar { width: 20%; }
}

#sideBarLocation div { display: inline; }

/* tables for input fields */
.sideBarStandard {
    width: 100%;
    margin: 0;
    padding: 2px 2px 2px 2px;
    font-size: 0.9em;
    text-align: left;
    vertical-align: top;
}

/* special for grids */
.sideBarGrids { font-size: 0.8em; }

/* headers of the side bar */
.sideBarHeader {
    text-align: left;
    padding: 2px;
    font-size: 1em;
}

/* align some elements explicitly right */
.sideBarRightAlign { float: right; }

/* align some elements explicitly right */
.sideBarTopAlign { vertical-align: top; }

/* route text area */
.sideBarRouteInput {
    width: 95%;
    height: 350px;
    margin: 2px 2px 2px 2px;
    font-family: Courier;
    font-size: 50%;
    text-align: left;
}

/* selects for ground overlays */
.sideBarGroundOverlaySelect { min-width: 150px; }

/* color just a dummy for jscolor avoids problems with the IDE reporting missing styles */
.color { /** dummy **/ }

/* -------------- map ------------*/
/* where the altitude profile is placed */
/* ReSharper restore DeclarationIsEmpty */
/* ReSharper restore DeclarationIsEmpty */
/* ReSharper restore DeclarationIsEmpty */
#mapAltitudeProfile {
    min-width: 600px;
    height: 10%;
    float: left;
    z-index: 0;
}

/** => width see below **/

/* where the map is placed */
#mapCanvas {
    min-width: 600px;
    /** 50 pixel for top bars means: */
    /** 800 => 6,25%
    /** 1000 => 5% */
    /** 1600 => 3,1% */
    float: left;
    z-index: 0;
    overflow: hidden;
}

/** use optimized height to avoid scrollbar, as long as there is nothing like 100%-50px **/
@media (max-height: 999px) {
    #mapCanvas { height: 91%; }
}

@media (min-height: 1000px) and (max-height: 1599px) {
    #mapCanvas { height: 94%; }
}

@media (min-height: 1600px) {
    #mapCanvas { height: 97%; }
}

@media (max-width: 1249px) {
    #mapCanvas, #mapAltitudeProfile { width: 70%; }
}

@media (min-width: 1250px) and (max-width: 1699px) {
    #mapCanvas, #mapAltitudeProfile { width: 75%; }
}

@media (min-width: 1700px) {
    #mapCanvas, #mapAltitudeProfile { width: 80%; }
}